<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <template id="my-component-template">
        <style>
            .container {
                background-color: #f1f1f1;
                padding: 10px;
            }
            .text {
                color: #4caf50;
            }
        </style>
        <div class="container">
            <div class="text">Hello, World!</div>
        </div>
    </template>
</head>
<body>
<!-- 给其挂载一个Shadow DOM-->
<div id="my-component"></div>
</body>
<script>
    /* *
    *Shadow DOM是一项Web标准，它允许在Web文档中创建封装的DOM树。
    *简单来说，Shadow DOM是一种将HTML文档中的组件封装到其自己的作用域中的技术。
    *这意味着，组件内部的DOM元素和样式不会和外部的文档中的元素和样式发生冲突，从而使其更加健壮、可维护和可重用。
    *Shadow DOM被广泛用于Web组件的实现中。
    * */
    const template = document.querySelector('#my-component-template');
    //? Element.attachShadow() 方法给指定的元素挂载一个 Shadow DOM，并且返回对 ShadowRoot 的引用
    //? mode:'open' 表示shadow root 元素可以从 js自测 外部访问根节点
    const shadowRoot = document.querySelector('#my-component').attachShadow({ mode: 'open' });
    //? Node.cloneNode() 方法返回调用该方法的节点的一个副本。
    const instance = template.content.cloneNode(true);
    shadowRoot.appendChild(instance);
</script>
</html>
